<script lang="ts" setup>
import { computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { TaskType } from "@/util/type";

const router = useRouter();
const store = useStore(Storekey);
// 当前登录用户
const user = computed(() => {
  return store.state.user;
});
const props = defineProps<{
  selectedTask: Studycodemodel.Iteamjob;
  taskTypeInfoCfg: Record<
    TaskType,
    { title: string; conditionText: (num: number, degree?: number) => string }
  >;
  questions: Studycodemodel.Iquestion[];
}>();
const taskType = computed(() => {
  return props.selectedTask.type || TaskType.QUESTION;
});
const tableData = computed(() => {
  const data = props.selectedTask.teamjobrelation
    ?.filter((e) => e.userid === user?.value.ID)
    .map((n) => {
      const e = props.questions.find((z) => z.ID === n.questionid);
      const index =
        props.selectedTask.jobquestion?.find(
          (z) => n.questionid === z.questionid
        )?.index || 0;
      return {
        ...e,
        state: n.state,
        questionid: n.questionid,
        index,
        teamjobid: props.selectedTask.ID,
      };
    })
    .sort((a, b) => a.index - b.index);
  // return data || []
  //
  return props.questions
    .map((target) => {
      let myTaskRelation = props.selectedTask.teamjobrelation?.find(
        (e) => e.userid === user.value?.ID && e.questionid === target.ID
      );
      const jobquestion = props.selectedTask.jobquestion?.find(
        (z) => target.ID === z.questionid
      );
      return {
        ...target,
        state: myTaskRelation ? myTaskRelation.state : false,
        myTaskRelation: !!myTaskRelation,
        questionid: jobquestion?.questionid,
        index: jobquestion?.index || 0,
        teamjobid: props.selectedTask.ID,
      };
    })
    .sort((a, b) => a.index - b.index);
});

onMounted(() => {
  start();
});
async function start() {}

function questionClick(row: any) {
  // 跳转至题目页面做题
  //     router.push({
  //         name: '题目',
  //         params: { ID: row.ID },
  //         query: { jobid: row.teamjobid }
  //   });
  const url = router.resolve({
    name: "题目",
    params: { ID: row.ID },
    query: { jobid: row.teamjobid },
  });
  window.open(url.href, "_blank");
}
</script>

<template>
  <div class="taskItem-container-box">
    <div class="">
      <!-- <el-descriptions :title="selectedTask.name" :column="2" size="large">
                <el-descriptions-item :span="2" label="任务完成条件:">
                    {{ taskTypeInfoCfg[taskType].conditionText(selectedTask.questionnum || 0,
                selectedTask.questionac) }}
                </el-descriptions-item>
            </el-descriptions> -->
    </div>
    <div class="">
      <el-table
        row-class-name="cursor-pointer"
        :data="tableData"
        @row-click="questionClick"
        style="width: 100%"
      >
        <template v-slot:empty>
          <el-empty
            image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png"
          />
        </template>
        <el-table-column
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column prop="ID" label="题目ID" width=""></el-table-column>
        <el-table-column
          prop="name"
          label="题目名称"
          width=""
        ></el-table-column>
        <el-table-column prop="label" label="标签">
          <template #default="{ row }">
            <el-tag
              class="question-intable-label"
              text
              type="primary"
              effect="plain"
              size="default"
              v-for="(v, keys) in row.label"
              v-text="v"
              :key="`1-${keys}`"
            >
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="我的进度">
          <template #default="{ row }">
            <el-icon>
              <el-icon>
                <circleCheckFilled
                  color="#67C23A"
                  v-show="row.myTaskRelation && row.state"
                />
                <WarningFilled
                  color="#F56C6C"
                  v-show="row.myTaskRelation && !row.state"
                />
                <WarnTriangleFilled
                  color="#F56C6C"
                  v-show="!row.myTaskRelation"
                />
              </el-icon>
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped></style>
